<!--
 * @Description: useImage (loading图像)
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:33:51
 * @LastEditTime: 2022-12-28 15:56:23
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <div>引用core方法</div>
    <el-icon class="is-loading" size="40" v-if="isLoading">
      <Loading />
    </el-icon>
    <img v-else :src="avatarUrl">
  </div>
  <div class="mt20">
    <div>引用组件</div>
    <UseImage src="https://place.dog/300/200">
      <template #loading>
        <el-icon class="is-loading" size="40">
          <Loading />
        </el-icon>
      </template>
      <template #error>
        Failed
      </template>
    </UseImage>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { useImage } from '@vueuse/core';
import { UseImage } from '@vueuse/components';
import { Loading } from '@element-plus/icons-vue';
export default {
  name: '',
  props: {},
  components: { UseImage, Loading },
  setup(props, { emit }) {
    function initState() {
      return {
        isLoading: '',
        avatarUrl: 'https://place.dog/300/200',
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      const { isLoading } = useImage({ src: state.avatarUrl });
      state.isLoading = isLoading;
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>